<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>卡通气泡弹幕墙</title>
  <style>
    body {
      margin: 0;
      font-family: "Comic Sans MS", cursive;
      background: linear-gradient(135deg, #ffe6f0, #fff7d6);
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
      overflow: hidden;
    }
    h1 {
      margin: 10px;
      color: #ff6699;
      text-shadow: 2px 2px #fff;
    }
    #wall {
      position: relative;
      width: 100%;
      max-width: 800px;
      height: 450px;
      background: #fffaf0;
      border: 5px dashed #ff99cc;
      border-radius: 25px;
      overflow: hidden;
      box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
      margin-bottom: 20px;
    }
    .bubble {
      position: absolute;
      white-space: nowrap;
      padding: 8px 15px;
      font-size: 18px;
      font-weight: bold;
      border-radius: 30px;
      background: linear-gradient(45deg,#ffccff,#ffffcc);
      border: 2px solid #ff99cc;
      color: #333;
      transform: rotate(0deg);
      cursor: pointer;
      animation: float 1s ease-in-out infinite alternate;
    }
    @keyframes float {
      from { transform: translateY(0px) rotate(-2deg);}
      to { transform: translateY(-5px) rotate(2deg);}
    }
    .panel {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 800px;
      width: 100%;
      justify-content: center;
    }
    .panel input, .panel select {
      padding: 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 2px solid #ff99cc;
      outline: none;
    }
    .panel button {
      padding: 10px 15px;
      border: none;
      border-radius: 8px;
      background: #ff99cc;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: .3s;
    }
    .panel button:hover {
      background: #ff6699;
    }
    .history {
      margin-top: 10px;
      font-size: 14px;
      color: #666;
      max-width: 800px;
      width: 100%;
    }
    .history span {
      margin: 3px;
      padding: 3px 8px;
      border-radius: 12px;
      background: #ffebf0;
      cursor: pointer;
      display: inline-block;
    }
    .history span:hover {
      background: #ffd6e7;
    }
  </style>
</head>
<body>
  <h1>🌈 卡通气泡弹幕墙</h1>
  <div id="wall"></div>

  <!-- 输入和控制区 -->
  <div class="panel">
    <input id="inputMsg" placeholder="写点有趣的..." />
    <select id="colorSel">
      <option value="linear-gradient(45deg,#ffccff,#ffffcc)">粉黄</option>
      <option value="linear-gradient(45deg,#aee6ff,#d4ffea)">蓝绿</option>
      <option value="linear-gradient(45deg,#ffd9a3,#ffaaaa)">橙粉</option>
    </select>
    <label>速度:<input type="number" id="speedSel" value="3" min="1" max="10" style="width:50px"></label>
    <label>减速:<input type="number" id="slowSel" value="5" min="2" max="10" style="width:50px"></label>
    <button id="fireBtn">发射</button>
  </div>

  <!-- 历史记录 -->
  <div class="history" id="historyBox"><strong>历史:</strong></div>

<script>
  const wall=document.getElementById("wall");
  const input=document.getElementById("inputMsg");
  const fire=document.getElementById("fireBtn");
  const colorSel=document.getElementById("colorSel");
  const speedSel=document.getElementById("speedSel");
  const slowSel=document.getElementById("slowSel");
  const historyBox=document.getElementById("historyBox");

  let historyList=[];

  function launch(txt){
    const b=document.createElement("div");
    b.className="bubble";
    b.innerText=txt;
    b.style.top=Math.random()*90+"%";
    b.style.left=wall.offsetWidth+"px";
    b.style.background=colorSel.value;
    wall.appendChild(b);

    let left=wall.offsetWidth;
    let speed=parseInt(speedSel.value)||3;
    let slowdown=parseInt(slowSel.value)||5;

    let t=setInterval(()=>{
      left-=b.isHover? speed/slowdown: speed;
      b.style.left=left+"px";
      if(left<-b.offsetWidth){
        wall.removeChild(b);
        clearInterval(t);
      }
    },16);

    // 悬停减速
    b.addEventListener("mouseenter",()=>b.isHover=true);
    b.addEventListener("mouseleave",()=>b.isHover=false);

    // 双击删除
    b.addEventListener("dblclick",()=>{
      wall.removeChild(b);
      clearInterval(t);
    });
  }

  function send(){
    const val=input.value.trim();
    if(val){
      launch(val);
      addHistory(val);
      input.value="";
    }
  }

  function addHistory(txt){
    historyList.push(txt);
    const s=document.createElement("span");
    s.innerText=txt;
    s.onclick=()=>{input.value=txt;};
    historyBox.appendChild(s);
  }

  fire.onclick=send;
  input.onkeypress=e=>{if(e.key==="Enter") send();};

  // 初始弹幕
  setTimeout(()=>{
    ["🎉 欢迎来到卡通弹幕墙","💡 试试悬停减速","😎 双击删除气泡"].forEach(t=>{
      launch(t); addHistory(t);
    });
  },500);
</script>
</body>
</html>
